<template>
<!--    自定义搜索标签-->
    <div>
        <van-cell  @click="showPopup" overlay="false">
<!--            点击弹出订阅列表-->
            <van-button icon="plus" type="primary" size="mini" color="#FD7304">订阅</van-button>
        </van-cell>
        <van-popup
                v-model="show"
                closeable
                position="bottom"
                :style="{ height: '100%',
                zIndex:'2020',
                }"
        >
            <div class="dyTitle">
                <h3>全部频道</h3>
            </div>
            <div style="overflow: hidden;padding: 10px 15px">
                <van-row type="flex" justify="space-between">
                    <van-col span="18">
                        <van-row type="flex">
                            <van-col span="8" style="font-weight: bold">我的频道</van-col>
                            <van-col span="12" style="font-size: 12px;line-height: 21px;color: #888888" v-if="close">已有的栏目</van-col>
                        </van-row>
                    </van-col>
                    <van-col span="6" style="text-align: end">
                        <van-button v-if="isEdit" color="#FD7304" plain size="mini" round style="width: 50px;" @click="Finish">完成</van-button>
                        <van-button v-else color="#FD7304" plain size="mini" round style="width: 50px;" @click="Edit">编辑</van-button>
                    </van-col>
                </van-row>

                <van-row class="dyList">
                    <van-col v-for="(item,index) in SubListRight" :key="index" span="5">{{item.name}}
                        <van-icon name="close" class="close" v-if="close&&item.name!='头条'" @click="deletelist(index)" />
                    </van-col>
                </van-row>


                <van-row type="flex">
                    <van-col span="6" style="font-weight: bold">频道推荐</van-col>
                    <van-col span="9" style="font-size: 12px;line-height: 21px;color: #888888" v-if="close">点击添加你喜欢的栏目</van-col>
                </van-row>

                <van-row class="tjList">
                    <span v-if="close">
                        <van-col v-for="(item,index) in SubList" :key="index" span="5" @click="addSub(item)">
                            {{item.name}}
                        </van-col>
                    </span>
                    <span v-else>
                        <van-col v-for="(item,index) in SubList" :key="index" span="5">
                            {{item.name}}
                        </van-col>
                    </span>

                </van-row>

            </div>
        </van-popup>
    </div>
</template>

<script>
    //获取分类列表              订阅文章   订阅文章列表
    import {getClassification,subNews,subNewsList} from '../../api/GoodNews'
    import {mapState} from 'vuex'
    import {Dialog} from "vant";
    export default {
        name: "Alert",
        data() {
            return {
                show: false,
                //分类列表
                list:[],
                list1:[],
                close:false,
                // newList:[],
                isEdit:false,
            //    分类列表
                allsublist:[],
            //推荐列表
                recommend:[],
            //    数组对象去重
                arr:[],
            //    删除后重新请求订阅
                afterdellist:'',
            //    要订阅的
                addList:[1],
            //    去重
                s:'',
                newArr:[],
                listId:'',
                newUserid:'1,2,3,4,5,6'
            };
        },
        created() {

            //页面一上来就会获取已经订阅的文章列表
            subNewsList().then(res=>{
                this.list = res.rows
                if (this.list==''){
                    console.log(123)
                    subNews(this.newUserid).then(res=>{
                        if(res.code==0){
                            subNewsList().then(res=>{
                                this.list = res.rows
                                this.$store.commit('ReSubListRight',{SubListRight:this.list})
                            })
                        }
                    })
                }
                this.list = this.list.splice(0,17)
                this.$store.commit('ReSubListRight',{SubListRight:this.list})
            })
            //页面一上来就获取分类列表，过滤出没订阅的列表recommend
            getClassification().then(res=>{
                this.allsublist = res.rows
                for (let i=0;i<this.allsublist.length;i++){
                    let flg = false
                    for (let j=0;j<this.list.length;j++){
                        if (this.allsublist[i].categoryId==this.list[j].categoryId){
                            flg = true
                        }
                    }
                    if (!flg){this.recommend.push(this.allsublist[i])}
                }
                this.$store.commit('ReSubList',{SubList:this.recommend})
            })


        },
        methods: {
            showPopup() {
                if (this.islogin){
                    this.show = true;
                }else{
                    Dialog();
                    Dialog.confirm({
                        title: '提示',
                        message: '你您还未登录，请先去登录',
                    })
                        .then(() => {
                            this.$router.push('/login')
                        })
                        .catch(() => {
                            this.$router.push('/index')
                        });
                }
            },
            //点击编辑按钮，开始编辑
            Edit(){
                this.close = !this.close
                this.isEdit = !this.isEdit
            },
            //点击删除按钮删除对应的栏目
            deletelist(index){

                this.list.splice(index, 1)
                this.$store.commit('ReSubListRight',{SubListRight:this.list})
                this.addList = []
                this.list.forEach(index=>{
                    this.afterdellist=index.categoryId
                    //拼接去重
                    this.addList=this.addList.concat(this.afterdellist)

                })
                this.s = new Set(this.addList);
                // 结果：Set {1,2,3,4}
                this.newArr = Array.from(this.s);
                subNews(this.newArr.join(',')).then(res=>{
                    //每次点击先给推荐栏目内容变空
                    this.recommend = []
                        if (res.code ==0){
                            subNewsList().then(res=>{
                                this.list = res.rows
                                this.$store.commit('ReSubListRight',{SubListRight:this.list})
                            })
                            //再次使用去重方法
                            getClassification().then(res=>{
                                this.allsublist = res.rows
                                for (let i=0;i<this.allsublist.length;i++){
                                    let flg = false
                                    for (let j=0;j<this.list.length;j++){
                                        if (this.allsublist[i].categoryId==this.list[j].categoryId){
                                            flg = true
                                        }
                                    }
                                    if (!flg){this.recommend.push(this.allsublist[i])}
                                }
                                this.$store.commit('ReSubList',{SubList:this.recommend})
                            })

                        }
                })
            },
            //点击添加栏目
            addSub(item){
                // 获取添加的栏目id
                this.listId=item.categoryId
                //拼接去重
                this.addList=this.addList.concat(this.listId)
                this.list.forEach(index=>{
                    this.afterdellist=index.categoryId
                    //拼接去重
                    this.addList=this.addList.concat(this.afterdellist)
                })

                this.s = new Set(this.addList);
                //结果：Set {1,2,3,4}
                this.newArr = Array.from(this.s);
                // subNewsList().then(res=>{
                //     //给已订阅列表重新赋值
                //     this.list = res.rows
                //     this.list.forEach(item=>{
                //         this.list1.push(item.categoryId)
                //     })
                //     // this.$store.commit('ReSubListRight',{SubListRight:this.list})
                //     this.newArr.push(this.list1)
                //     console.log(this.newArr)
                // })
                //调用订阅文章接口
                subNews(this.newArr.join(',')).then(res=>{

                    //获得订阅文章的列表
                    subNewsList().then(res=>{
                        //给已订阅列表重新赋值
                        this.list = res.rows
                        this.$store.commit('ReSubListRight',{SubListRight:this.list})
                    })
                    //未订阅列表渲染前先清空
                    this.recommend = []
                    //再次使用去重方法
                    getClassification().then(res=>{
                        this.allsublist = res.rows
                        for (let i=0;i<this.allsublist.length;i++){
                            let flg = false
                            for (let j=0;j<this.list.length;j++){
                                if (this.allsublist[i].categoryId==this.list[j].categoryId){
                                    flg = true
                                }

                            }
                            if (!flg){this.recommend.push(this.allsublist[i])}
                        }
                        this.$store.commit('ReSubList',{SubList:this.recommend})
                    })
                })
            },
            // 点击完成渲染首页页面
            Finish(){
                this.isEdit = !this.isEdit
                this.close = !this.close
            }

        },
        computed:{
            ...mapState({
                SubList:'SubList',
                SubListRight:'SubListRight',
                islogin:'islogin'
            })
        }

    }
</script>

<style scoped lang="less">
    .dyTitle{
        height: 50px;
        line-height: 50px;
        text-align: center;
        border-bottom: 1px solid #cccccc;
    }
    /*订阅列表*/
    .dyList{
        margin-top: 35px;
        div{
            height: 30px;line-height: 30px;text-align: center;border: 1px solid #cccccc;border-radius: 10%;margin-left: 10px;margin-bottom: 10px;position: relative;
            .close{position: absolute;
            left: 0;
                top: 0;
                color: #888888;
            }
        }
    }
/*    推荐列表*/
    .tjList{
        margin-top: 35px;
        div{
            height: 30px;line-height: 30px;text-align: center;border: 1px solid #cccccc;border-radius: 10%;margin-left: 10px;margin-bottom: 10px;
        }
    }
</style>